<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>jq_ajax获取数据的轮播图</title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
	<select name="" id="">
	</select>
	<div class="web">
		<div class="carousel_box">
			<!--ul>(li>a>img)*3-->
			<ul>
				<!-- <li>
						<a href="">
							<img src="img/2.jpg" alt="" />
							<div class="mask"></div>
						</a>
					</li> -->
			</ul>
			<div class="arrow left_arrow">
				<i>&lt;</i>
			</div>
			<div class="arrow right_arrow">
				<i>&gt;</i>
			</div>
			<div class="point_box">
				<ul>
				</ul>
			</div>
		</div>
	</div>
	<script src="./jq_3.4.1.js"></script>
	<script>
		var select = $("select"),
			carousel_box = $(".carousel_box"),
			carousel_ul = $(".carousel_box>ul"),
			left_arrow = $(".left_arrow"),
			right_arrow = $(".right_arrow"),
			point_ul = $(".point_box>ul"),
			now_index = last_index = 0,
			time,
			is_run = false;
		//请求本地数据
		$.ajax({
			method: "get",
			url: "./position_list.json",
			success: function (data) {
				data.forEach(function (val) {
					// console.log(val);
					select.append(`<option value="${val.id}">${val.name}</option>`);
				})
			}
		},
			carousel_ajax()
		)

		//请求线上数据
		function carousel_ajax() {

			//清空重置
			carousel_ul.empty();
			point_ul.empty();
			carousel_box.unbind("mouseenter").unbind("mouseleave");
			left_arrow.unbind("click");
			right_arrow.unbind("click");
			clearInterval(time);
			now_index = 0;

			$.ajax({
				method: "get",
				url: "http://jianshe.bluej.cn/api/index/get_carousel",
				data: { position_id: select.val() },
				success: function (data) {
					data.data.forEach(function (val, index) {
						carousel_ul.append(`<li>
											<a href="">
											<img src="http://jianshe.bluej.cn${val.ch_img_url}" alt="" />
											</a>
											</li>`);
						point_ul.append(`<li></li>`);
					});

					$(".carousel_box>ul>li").last().clone().prependTo(carousel_ul);
					$(".carousel_box>ul>li").eq(1).clone().appendTo(carousel_ul);

					//轮播函数
					function _run() {
						carousel_ul.css("transform", `translate(-${now_index}00%)`);
						// console.log(now_index)
						sub_run();
						carousel_ul.on("transitionend", function () {
							is_run = false;
							carousel_ul.unbind("transitionend");
						})
					}

					//自动轮播
					function autoplay() {
						if (!is_run) {
							is_run = true;
							time = setInterval(() => {
								if (++now_index >= ($(".carousel_box>ul>li").length - 1)) {
									console.log(222222222222222);
									right_arrow_end();
								} else {
									_run();
								}
							}, 1000);
						}
					}
					autoplay();

					//鼠标移入停止轮播.移出开始轮播
					carousel_box.mouseenter(function () {
						clearInterval(time);
					}).mouseleave(function () {
						autoplay();
					})

					//左箭头
					left_arrow.click(function () {
						if (!is_run) {
							is_run = true;
							if (--now_index <= 0) {
								left_arrow_end();
							} else {
								_run();
							}
						}

					})

					//右箭头
					right_arrow.click(function () {
						if (!is_run) {
							is_run = true;
							if (++now_index >= ($(".carousel_box>ul>li").length - 1)) {
								console.log(222222222222222);
								right_arrow_end();
							} else {
								_run();
							}
						}
					})

					//左箭头尽头函数
					function left_arrow_end() {
						carousel_ul.css("transform", "translate(0%)");
						carousel_ul.on("transitionend", function () {
							carousel_ul.css("transition", "none");
							now_index = $(".carousel_box>ul>li").length - 2;
							_run();
							getComputedStyle(carousel_ul[0]).transition;
							carousel_ul.css("transition", "");
							carousel_ul.unbind("transitionend");
							is_run = false;
							sub_run();
						})
					}

					//右箭头尽头函数
					function right_arrow_end() {
						_run();
						carousel_ul.on("transitionend", function () {
							now_index = 1;
							carousel_ul.css("transition", "none");
							_run();
							getComputedStyle(carousel_ul[0]).transition;
							carousel_ul.css("transition", "");
							carousel_ul.unbind("transitionend");
							is_run = false;
							sub_run();
						})

					}
				}

			})
		}

		//切换轮播图内容
		select.on("change", function () {
			carousel_ajax()
		})
		
		//下标点的切换
		function sub_run(){
			$(".point_box>ul>li").eq(last_index-1).removeClass("active");
			$(".point_box>ul>li").eq(now_index-1).addClass("active");
			last_index = now_index;
		}
	</script>
</body>

</html>